<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>XRK-AGT葵崽 API控制中心</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <canvas id="bgParticles"></canvas>
    <div class="app-container">
        <aside class="sidebar" id="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <div class="logo-icon">🤖</div>
                    <span>葵崽API Center</span>
                </div>
                <button class="theme-toggle" id="themeToggle">
                    <div class="theme-toggle-thumb"></div>
                </button>
            </div>

            <nav class="sidebar-nav">
                <a href="#" class="nav-item active" data-page="home" id="navHome">
                    <span class="nav-icon"></span>
                    <span class="nav-text">返回首页</span>
            </a>
                <a href="#" class="nav-item" data-page="chat" id="navChat">
                    <span class="nav-icon"></span>
                    <span class="nav-text">葵宝聊天</span>
                </a>
                <a href="#" class="nav-item" data-page="config" id="navConfig">
                    <span class="nav-icon"></span>
                    <span class="nav-text">配置管理器</span>
                </a>
                <a href="#" class="nav-item" data-page="api" id="navApi">
                    <span class="nav-icon"></span>
                    <span class="nav-text">API调试</span>
            </a>
            </nav>

            <div class="api-groups-container" id="apiGroups" style="display: none;">
                <!-- API groups will be dynamically loaded here -->
            </div>
        </aside>

        <main class="main-content">
            <header class="header">
                <div class="header-content">
                    <div class="api-key-section">
                        <div class="api-key-input">
                            <input type="password" id="apiKey" placeholder="输入 API Key" autocomplete="off">
                            <button id="saveApiKeyBtn">保存</button>
                        </div>
                    </div>

                    <div class="status-cards">
                        <div class="status-card">
                            <span class="status-dot" id="statusDot"></span>
                            <span id="statusText">未连接</span>
                        </div>
                    </div>
                </div>
            </header>

            <div class="content" id="content">
                <div class="welcome-screen" id="systemStatusPage">
                    <div class="system-status-header">
                        <h1 class="welcome-title">系统状态监控</h1>
                        <p class="welcome-desc">实时监控系统运行状态</p>
                    </div>
                    <div class="system-status-grid" id="systemStatusGrid">
                    </div>
                </div>
            </div>
        </main>
    </div>

    <div class="overlay" id="overlay"></div>

    <button class="floating-btn" id="floatingBtn">
        <svg viewBox="0 0 100 100" class="sunflower-icon">
            <circle cx="50" cy="50" r="20" fill="#FFD700"/>
            <g class="petals">
                <ellipse cx="50" cy="20" rx="8" ry="16" fill="#FFD700" transform="rotate(0 50 50)"/>
                <ellipse cx="50" cy="20" rx="8" ry="16" fill="#FFD700" transform="rotate(30 50 50)"/>
                <ellipse cx="50" cy="20" rx="8" ry="16" fill="#FFD700" transform="rotate(60 50 50)"/>
                <ellipse cx="50" cy="20" rx="8" ry="16" fill="#FFD700" transform="rotate(90 50 50)"/>
                <ellipse cx="50" cy="20" rx="8" ry="16" fill="#FFD700" transform="rotate(120 50 50)"/>
                <ellipse cx="50" cy="20" rx="8" ry="16" fill="#FFD700" transform="rotate(150 50 50)"/>
                <ellipse cx="50" cy="20" rx="8" ry="16" fill="#FFD700" transform="rotate(180 50 50)"/>
                <ellipse cx="50" cy="20" rx="8" ry="16" fill="#FFD700" transform="rotate(210 50 50)"/>
                <ellipse cx="50" cy="20" rx="8" ry="16" fill="#FFD700" transform="rotate(240 50 50)"/>
                <ellipse cx="50" cy="20" rx="8" ry="16" fill="#FFD700" transform="rotate(270 50 50)"/>
                <ellipse cx="50" cy="20" rx="8" ry="16" fill="#FFD700" transform="rotate(300 50 50)"/>
                <ellipse cx="50" cy="20" rx="8" ry="16" fill="#FFD700" transform="rotate(330 50 50)"/>
            </g>
        </svg>
    </button>

    <div id="toastContainer"></div>

    

    <script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
    <script src="app.js"></script>
</body>
</html>